import { useEffect, useState } from "react"
import styles from "./person.module.css"
import Level from "../Level/Level"

export default function Person(props) {
  useEffect(() => {
    console.log("useEffect")
    return () => {
      console.log("卸载")
    }
  }, [])

  const [count, setCount] = useState(0)

  const [level, setLevel] = useState(0)

  function click1(e) {
    console.log(e, "e")
    e.target.style.color = "#bfa"
    e.target.style.background = "pink"
  }

  function click2() {
    setCount(count + 1)
  }

  function leverClick() {
    setLevel(level + 10)
  }

  return (
    <div>
      <h1 className={styles.person}>Person</h1>
      <h2
        onClick={(e) => {
          click1(e)
        }}
      >
        {props.name}
      </h2>
      <h2>{props.age}</h2>
      <p style={{ color: "red", fontSize: "20px" }}>Nihao </p>

      <button onClick={click2}>{count}</button>
      <Level level={level} levelClick={leverClick} />

      <Level level={level} levelClick={leverClick} />

      <hr />
    </div>
  )
}
